<template>
  <div class="wrapper">
    <el-form :inline="true">
      <el-form-item>
        <el-dropdown @command="setDate">
          <span class="el-dropdown-link">
            {{timeStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'时间类型',id:''}">时间类型</el-dropdown-item>
            <el-dropdown-item :command="{title:'入住时间',id:'1'}">入住时间</el-dropdown-item>
            <el-dropdown-item :command="{title:'离店时间',id:'2'}">离店时间</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="startEndTime"
          type="daterange"
          :clearable="false"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timeSearch"
          :disabled="isDisable"
          size="small">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <h3 style="text-align:center">结算方式：<span style="color:red">{{this.clearingTurnover.clearing}}</span></h3>
    <div class="chart-wrap">
      <div id="myChart_1"></div>
      <div id="myChart_2"></div>
    </div>
  </div>
</template>

<script>
import { getFinanceOverview, ClearingFinance } from "@/public/js/finance";
import { logo } from "@/public/js/setting";
export default {
  components: {},
  props: {},
  data() {
    return {
      clearingTurnover: "",
      afterTaxPay: "",
      payList: [],
      pageNo: 1,
      total: 0,
      pageSize: 10,
      dialogVisible: false,
      detailData: "",
      oldPath: "",
      timeStr: "时间类型",
      rules: {
        clearingNum: [
          { required: true, message: "请输入结算单号", trigger: "blur" }
        ],
        payMoney: [
          { required: true, message: "请输入付款金额", trigger: "blur" }
        ],
        voucher: [{ required: true, message: "请输入凭证", trigger: "change" }],
        arriveTime: [
          { required: true, message: "请输入到账时间", trigger: "blur" }
        ]
      },
      startEndTime: [],
      startTime: "",
      endTime: "",
      time: "",
      isDisable: true
    };
  },
  watch: {},
  computed: {},
  methods: {
    _getFinanceOverview() {
      getFinanceOverview({
        startTime: this.startTime,
        endTime: this.endTime,
        time: this.time
      }).then(res => {
        this.clearingTurnover = res.data.clearingTurnover;
        this.afterTaxPay = res.data.afterTaxPay;
        this.draw();
      });
    },
    //时间查新
    timeSearch(val) {
      this.startTime = val[0];
      this.endTime = val[1];
      this._getFinanceOverview();
    },
    setDate(command) {
      this.timeStr = command.title;
      this.time = command.id;
      this.startEndTime = [];
      if (command.id) {
        this.isDisable = false;
      } else {
        this.isDisable = true;
        this._getFinanceOverview();
      }
    },
    draw() {
      let myChart_1 = this.$echarts.init(document.getElementById("myChart_1"));
      let myChart_2 = this.$echarts.init(document.getElementById("myChart_2"));
      myChart_1.setOption({
        title: {
          text: `累计营业额`,
          subtext: "￥" + this.clearingTurnover.moneySum, //副标题文本样式
          subtextStyle: {
            color: "red"
          },
          x: "center",
          textAlign: "center",
          textStyle: {
            //文字颜色
            fontStyle: "normal",
            //字体系列
            fontFamily: "sans-serif",
            //字体大小
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 0,
          data: ["分销奖励", "支付手续费", "服务手续费", "应收营业总额"]
        },
        series: {
          type: "pie",
          radius: "65%",
          center: ["45%", "50%"],
          data: this.setDataCharts(this.clearingTurnover)
        }
      });
      myChart_2.setOption({
         tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        title: {
          text: "结算记录",
          subtext: "￥" + this.afterTaxPay.afterTaxSum, //副标题文本样式
          subtextStyle: {
            color: "red"
          },
          x: "center",
          textAlign: "center",
          textStyle: {
            //文字颜色
            fontStyle: "normal",
            //字体系列
            fontFamily: "sans-serif",
            //字体大小
            fontSize: 14
          }
        },
        legend: {
          bottom: 0,
          data: ["已结算", "未结算"]
        },
        series: {
          type: "pie",
          radius: "65%",
          center: ["45%", "50%"],
          data: this.setDataCharts(this.afterTaxPay)
        }
      });
    },
    //立即结算
    payed(detail) {
      console.log(detail);
      this.dialogVisible = true;
      this.oldPath = "";
      this.detailData = detail;
    },
    setDataCharts(_data) {
      let data = [];
      for (var i in _data) {
        if (i == "sellMoney") {
          data.push({
            value: _data[i],
            name: `分销奖励`
          });
        } else if (i == "pay") {
          data.push({
            value: _data[i],
            name: `支付手续费`
          });
        } else if (i == "service") {
          data.push({
            value: _data[i],
            name: `服务手续费`
          });
        } else if (i == "preTax") {
          data.push({
            value: _data[i],
            name: `应收营业总额`
          });
        } else if (i == "payment") {
          data.push({
            value: _data[i],
            name: `已结算`
          });
        } else if (i == "unpaid") {
          data.push({
            value: _data[i],
            name: `未结算`
          });
        }
      }
      return data;
    }
  },
  created() {
    this._getFinanceOverview();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    padding-left: 35px;
  }
  .chart-wrap {
    display: flex;
    margin-bottom: 20px;
    & > div {
      flex: 1;
      height: 400px;
    }
  }
}
</style>